import { FormProps, InputNumber } from "antd";
import './index.scss'
import { addCategoryApi, getCategoryDetailApi, updateCategoryApi } from "@/api/category";
import { message } from "@/utils/AntdGlobal";

type Props = {
  title: string,
  onSuccess: () => void,
  categoryId?: number
}
type FieldType = {
  name: string
  type: number
  sort: number
};
export const AddCategory = memo(forwardRef((prop: Props, ref) => {
  const [form] = Form.useForm()
  const { Option } = Select;
  const { title, onSuccess, categoryId } = prop
  // 添加和修改员工
  const [open, setOpen] = useState(false);
  const showModal = () => {
    form.resetFields()
    setOpen(true)
  }
  const handleCancel = () => {
    setOpen(false);
  };
  const onFinish: FormProps<FieldType>['onFinish'] = async (values) => {
    if (categoryId) {
      const res = await updateCategoryApi({ ...values, id: categoryId })
      if (res.code === 1) {
        message.success('修改分类成功')
      }
    } else {
      const res = await addCategoryApi({ ...values })
      if (res.code === 1) {
        message.success('添加分类成功')
      }
    }
    onSuccess()
    setOpen(false)
  };
  // 获取详情数据
  const getCategoryDetail = async (id: number) => {
    const res = await getCategoryDetailApi(id)
    form.setFieldsValue({ ...res.data, type: res.data.type + '' })
  }
  useImperativeHandle(
    ref,
    () => {
      return {
        showModal,
        getCategoryDetail
      }
    }
  );
  return (
    <Modal
      title={title}
      centered
      open={open}
      onCancel={handleCancel}
      footer={null}
    >
      <Form
        name="catetroy"
        layout="inline"
        labelCol={{ span: 4 }}
        onFinish={onFinish}
        style={{ minHeight: 230 }}
        autoComplete="off"
        form={form}
      >
        <Form.Item<FieldType>
          label="分类名称"
          name="name"
          style={{ width: '100%' }}
          rules={[{ required: true, message: '请输入分类名称!' }]}
        >
          <Input placeholder="请输入分类名称" allowClear />
        </Form.Item>
        <Form.Item<FieldType>
          style={{ width: '100%' }}
          name="type" label="分类类型"
          rules={[{ required: true, message: '请输入分类名称!' }]}>
          <Select
            placeholder="请选择分类类型"
            allowClear
          >
            <Option value="1">菜品分类</Option>
            <Option value="2">套餐分类</Option>
          </Select>
        </Form.Item>
        <Form.Item<FieldType>
          style={{ width: '100%' }}
          label="排序"
          name="sort"
          rules={[{ required: true, message: '请输入排序!' }]}
        >
          <InputNumber style={{ width: '100%' }} min={0} max={100} placeholder="请输入排序" />
        </Form.Item>
        <Form.Item style={{ width: '100%' }}>
          <div className="flex flex-justify-end">
            <Button type="default" className="mr-4" onClick={handleCancel}>
              取消
            </Button>
            <Button type="primary" htmlType="submit">
              确认
            </Button>
          </div>
        </Form.Item>
      </Form>
    </Modal>
  )
}))